<template>
  <div class="pro-container">
    <div class="head">
      <div class="top"> 
        <el-form ref="form" :model="information" label-width="100px">
          <el-form-item label="创建时间:">
            <el-date-picker
              v-model="information.value1"
              type="date"
              placeholder="年/月/日">
            </el-date-picker>
            <span class="dash">~</span>
            <el-date-picker
              v-model="information.value2"
              type="date"
              placeholder="年/月/日">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="缴费日期:">
            <el-date-picker
              v-model="information.value3"
              type="date"
              placeholder="年/月/日">
            </el-date-picker>
            <span class="dash">~</span>
            <el-date-picker
              v-model="information.value4"
              type="date"
              placeholder="年/月/日">
            </el-date-picker>
          </el-form-item>
          <div class="choose">
            <el-button @click="yesterday">昨天</el-button>
            <el-button @click="week">近一周</el-button>
            <el-button @click="month">近一月</el-button>
          </div>
          <el-form-item label="账单状态:">
            <el-select v-model="information.billstate" placeholder="">
              <el-option label="待缴费" value="pending"></el-option>
              <el-option label="缴费成功" value="Payment"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="学生姓名:">
            <el-input type="text" v-model="information.name" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="家长手机:">
            <el-input type="text" v-model="information.mobile" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="班级名称:">
            <el-input type="text" v-model="information.classname" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="收据状态:">
            <el-select v-model="information.receiptstate" placeholder="">
              <el-option label="未打印" value="Notprinted"></el-option>
              <el-option label="已打印" value="printed"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="账单名称:">
            <el-input type="text" v-model="information.billname" placeholder=""></el-input>
          </el-form-item>
          <div class="btn">
            <el-button type="primary">查询</el-button>
            <el-button type="warning" @click="reset">重置</el-button>
          </div>
        </el-form>
      </div>
      <div class="bottom">
        <el-button type="success">上传账单</el-button>
        <el-button type="primary" @click="getHarvest">当面收</el-button>
        <el-button type="warning" @click="getPay">当面付</el-button>
      </div>
    </div>
    <div class="main">
      <div class="maintop">
        <div class="topleft">
          <p>总计:</p>
          <span>250.00元</span>
        </div>
        <div class="topright">
          <span>下载模板</span>
        </div>
      </div>
      <div class="body">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          :header-cell-style="{background:'#f5f4f4'}">
          <el-table-column
            prop="billname"
            label="账单名称"
            width="160">
          </el-table-column>
          <el-table-column
            prop="name"
            label="学生姓名"
            width="150">
          </el-table-column>
          <el-table-column
            prop="mobile"
            label="家长手机"
            width="150">
          </el-table-column>
          <el-table-column
            prop="class"
            label="班级名称"
            width="160">
          </el-table-column>
          <el-table-column
            prop="money"
            label="账单金额"
            width="160">
          </el-table-column>
          <el-table-column
            prop="pay"
            label="实缴金额"
            width="155">
          </el-table-column>
          <el-table-column
            prop="state"
            label="状态"
            width="160">
            <template slot-scope="scope">
              <span v-if="scope.row.payment===0" style="color:#FF0000">● 待缴费</span>
              <span v-else style="color:#008000">● 缴费成功</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="receipt"
            label="收据状态"
            width="150">
            <template slot-scope="scope">
              <span v-if="scope.row.print===0" style="color:#FF0000">● 未打印</span>
              <span v-else style="color:#008000">● 已打印</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="date"
            label="缴费日期"
            width="170">
          </el-table-column>
          <el-table-column
            label=""
            width="250">
            <template slot-scope="scope">
              <el-button size="small" @click="getDetails">查看</el-button>
              <el-button size="small" @click="payment" style="color:#ff9c08" v-if="scope.row.payment===0">催缴</el-button>
              <el-button size="small" @click="getEdit" v-if="scope.row.edit===0">编辑重发</el-button>
              <el-button size="small" @click="getEdit" style="color:#f704d7" v-if="scope.row.payment===1 && scope.row.print===0">打印收据</el-button>
              <el-button size="small" @click="del" style="color:#ff0000">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            :current-page.sync="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="100"
            layout="prev, pager, next, sizes, jumper"
            :total="100">
          </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog
      title="账单详情"
      :visible.sync="show"
      width="70%"
      :before-close="handleClose">
      <el-form ref="form" :model="form" label-width="100px">
          <el-form-item label="班级:">
            <el-select v-model="form.class" placeholder="请选择班级">
              <el-option v-for="(item,index) in tclass" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="学生:">
            <el-select v-model="form.student" placeholder="请选择学生">
              <el-option v-for="(item,index) in students" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="账单名称:">
            <el-input v-model="form.billname" placeholder="请填写账单名称"></el-input>
          </el-form-item>
          <el-form-item label="家长手机号:">
            <el-input v-model="form.mobile" placeholder="请填写家长手机号"></el-input>
          </el-form-item>
          <el-form-item label="收费截止日期:">
            <el-date-picker
              v-model="form.date"
              type="date"
              placeholder="年/月/日">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="账单金额:">
            <el-input type="number" v-model="form.money" placeholder=""></el-input>￥
          </el-form-item>
          <el-form-item label="备注:">
            <el-input type="textarea" v-model="form.remarks"></el-input>
          </el-form-item>
        </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="close">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="账单详情"
      :visible.sync="grow"
      width="70%"
      :before-close="handleClose">
      <div class="con">
        <div class="code">
          <img src="../../images/code.png">
        </div>
        <div class="foot">
          <el-button type="success">打印</el-button>
          <el-button type="primary">下载</el-button>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="账单详情"
      :visible.sync="seeShow"
      width="70%"
      class="see"
      :before-close="handleClose">
      <div class="left">
        <div class="trem">
          <span>账单名称:</span>
          <span>{{details.billname}}</span>
        </div>
        <div class="trem">
          <span>学生姓名:</span>
          <span>{{details.studentname}}</span>
        </div>
        <div class="trem">
          <span>家长手机:</span>
          <span>{{details.parentmobile}}</span>
        </div>
        <div class="trem">
          <span>班级名称:</span>
          <span>{{details.classname}}</span>
        </div>
        <div class="trem">
          <span>账单金额:</span>
          <span>{{details.moneyvalue}}</span>
        </div>
        <div class="trem">
          <span>实缴金额:</span>
          <span>{{details.paidamount}}</span>
        </div>
        <div class="trem">
          <span>账单状态:</span>
          <span v-if="details.billstatuvalue ==='缴费成功'" style="color:#008000">{{details.billstatuvalue}}</span>
          <span v-else style="color:#ff0000">缴费失败</span>
        </div>
        <div class="trem">
          <span>收据状态:</span>
          <span v-if="details.receiptstatuvalue ==='已打印'" style="color:#008000">{{details.receiptstatuvalue}}</span>
          <span v-else style="color:#ff0000">未打印</span>
        </div>
      </div>
      <div class="right">
        <span>缴费项目:</span>
        <el-table
          :data="billData"
          border
          style="width: 74%">
          <el-table-column
            prop="name"
            label="项目名称"
            width="115">
          </el-table-column>
          <el-table-column
            prop="amount"
            label="项目金额"
            width="115">
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeSee">取 消</el-button>
        <el-button type="primary" @click="closeSee">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="账单详情"
      :visible.sync="edit"
      width="70%"
      class="edit"
      :before-close="handleClose">
      <el-form ref="form" :model="bill" label-width="100px">
        <el-form-item label="班级名称:">
          <el-select v-model="bill.class" placeholder="">
            <el-option label="一年级一班" value="class1"></el-option>
            <el-option label="二年级二班" value="class2"></el-option>
            <el-option label="三年级三班" value="class3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学生姓名:">
          <el-select v-model="bill.student" placeholder="">
            <el-option label="张小三" value="zhangxiaosan"></el-option>
            <el-option label="赵小四" value="zhaoxiaosi"></el-option>
            <el-option label="王小五" value="wangxiaowu"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="家长手机:">
          <el-input v-model="bill.mobile" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="账单名称:">
          <el-input v-model="bill.billname" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="备注:">
          <el-input type="textarea" v-model="bill.remarks"></el-input>
        </el-form-item>
        <el-form-item label="缴费项目:">
          <el-input v-model="bill.detail" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="账单金额:">
          <el-input type="text" v-model="bill.money" placeholder=""></el-input>
        </el-form-item>
      </el-form>
      <div class="add">
        <span>添加</span>
      </div>
      <el-table
        :data="billData"
        border
        style="width: 23%">
        <el-table-column
          prop="name"
          label="项目名称"
          width="104">
        </el-table-column>
        <el-table-column
          prop="amount"
          label="项目金额"
          width="104">
        </el-table-column>
        <el-table-column
          label="操作"
          width="90">
          <template slot-scope="scope">
            <el-button size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeEdit">取 消</el-button>
        <el-button type="primary" @click="preserveEdit">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { GetTabledata, GetDetail, GetPayment } from "@/api/detail";
import { GetClass, GetStudent } from "@/api/class";
export default {
  name: 'Pro',
  data(){
    return{
      selectValue:"",
      selectValues:"",
      student:"",
      parent:"",
      clas:"",
      billn:"",
      currentPage: 1,
      show:false,
      grow:false,
      seeShow:false,
      edit:false,
      tableData:[],
      tclass:[],
      students:[],
      form: {
        class: '',
        student: '',
        billname: '',
        mobile: '',
        date:'',
        money: '',
        remarks: ''
      },
      bill: {
        class: '',
        student: '',
        billname: '',
        mobile: '',
        detail:'',
        money: '',
        remarks: ''
      },
      information:{
        value1:'',
        value2:'',
        value3:'',
        value4:'',
        billstate:'',
        name:'',
        mobile:'',
        classname:'',
        receiptstate:'',
        billname:''
      },
      details:{},    
      billData:[]
    }
  },
  mounted(){
    this.init(); 
    this.detail();
    this.billing(); 
    this.getStu();
  },
  methods: {
    init() {
      GetTabledata().then( res => {
        if(res.code === 200) {
          this.tableData = res.data;
        }
      })
    },
    detail() {
      GetDetail().then( res => {
        if(res.code === 200) {
          this.details = res.data;
        }
      })
    },
    billing() {
      GetPayment().then( res => {
        if(res.code === 200) {
          this.billData = res.data;
        }
      })
    },
    getClass() {
      GetClass().then( res => {
        if(res.code === 200) {
          this.tclass = res.data;
        }
      })
    },
    getStu() {
      GetStudent().then( res => {
        if(res.code === 200) {
          this.students = res.data;
        }
      })
    },
    yesterday() {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24);
      this.information.value3 = date;
      this.information.value4 = new Date();
    },
    week() {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
      this.information.value3 = date;
      this.information.value4 = new Date();
    },
    month() {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 30);
      this.information.value3 = date;
      this.information.alue4 = new Date();
    },
    reset() {
      this.information.value1 ="",
      this.information.value2 ="",
      this.information.value3 ="",
      this.information.value4 ="",
      this.information.billstate ="",
      this.information.name ="",
      this.information.mobile ="",
      this.information.classname ="",
      this.information.receiptstate ="",
      this.information.billname =""
    },
    getHarvest() {
      this.show = true;
    },
    close() {
      this.show = false;
    },
    getPay() {
      this.grow = true;
    },
    cancel() {
      this.grow = false;
    },
    getDetails() {
      this.seeShow = true;
    },
    closeSee() {
      this.seeShow = false;
    },
    preserveDetail() {
      this.seeShow = false;
    },
    getEdit() {
      this.edit = true;
    },
    closeEdit() {
      this.edit = false;
    },
    preserveEdit() {
      this.edit = false;
    },
    payment() {
      this.$alert("是否催缴?", "催缴", {
        confirmButtonText: "确定"
      });
    },
    del() {
      this.$alert("是否删除?", "删除", {
        confirmButtonText: "确定"
      });
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.pro-container {
  width: 98%;
  height: 865px;
  margin-top: 20px;
  margin-left: 20px;
  background:#fff;
  position: relative;
}
.head{
  width:100%;
  height:260px;
  border-bottom:1px solid #000;
  padding-top: 20px;
  .top{
    width:90%;
    margin: 0 auto;
    /deep/ .el-form-item:nth-of-type(1),.el-form-item:nth-of-type(2){
      width: 38%;
      display: inline-block;
    }
    /deep/ .el-form-item{
      width: 18%;
      display: inline-block;
    }
    /deep/ .el-form-item:nth-of-type(7){
      margin-right: 10%;
    }
  }
  .bottom{
    margin-left: 80px;
  }
}
.choose{
  display: inline-block;
  width: 18%;
  margin-left: 20px;
}
.btn{
  display: inline-block;
  height:17%;
  margin-left:100px;
}
.main{
  width:100%;
  height:600px;
}
.maintop{
  width:90%;
  height:50px;
  margin:0 auto;
  .topleft{
    width:20%;
    height:100%;
    float:left;
    p{
      display: inline-block;
    }
    span{
      color:#339900;
    }
  }
  .topright{
    height:100%;
    float:right;
    margin-top:15px;
    span{
      font-size:14px;
      color:#00f;
      text-decoration:underline;
    }
  }
}
.body{
  width: 100%;
  height: auto;
  /deep/ .cell{
    text-align: center;
  }
  /deep/ .el-table_2_column_20{
    color: #109CEF;
  }
  /deep/ .el-button{
    border: none;
    color: #00f;
    padding: 0;
  } 
  .block{
    float: right;
    margin-top: 20px;
    margin-right: 20px;
    /deep/ .el-pagination button{
      border: 1px solid #ccc;
      border-radius: 5px;
      margin-right: 10px;
    }
    /deep/ .el-pager li{
      border: 1px solid #ccc;
      border-radius: 5px;
      margin-right: 10px;
    }
    /deep/ .el-pager li.active{
      background: #409EFF;
      color: #fff;
      border: none;
    }
  }
}
/deep/ .el-dialog{
  .el-form-item{
    width: 24%;
  }
  .el-form-item__label{
    width: 101px !important;
  }
  .el-form-item__content{
    margin-left: 101px !important;
  }
  .el-input{
    width: 92%;
  }
  .el-textarea__inner{
    height: 160px;
  }
  .con{
    width: 23%;
    height: 90%;
    margin: 0 auto;
    margin-top: 20px;
    .foot{
      width: 100%;
      height: 40px;
      margin-top: 30px;
      .el-button:first-child{
        margin-right: 125px;
      }
    }
  }
}
.see{
  /deep/ .el-dialog{
    height: 80%;
    .el-dialog__footer{
      position: absolute;
      bottom: 20px;
      right: 20px;
    }
  }
  .left{
    width: 40%;
    margin-left: 15px;
    float: left;
    .trem{
      margin-bottom: 20px;
    }
  }
  .right{
    width: 24%;
    float: left;
    span{
      position: absolute;
      top: 85px;
      left: 35%;
    }
    .el-table{
      display: inline-block;
      border: 1px solid #000;
      color: #000;
    }
    /deep/ .el-table .cell{
      text-align: center;
    }
    /deep/ .el-table--border td{
      border-right: 1px solid #000;
    }
    /deep/ .el-table--border th{
      border-right: 1px solid #000;
    }
    /deep/ .el-table td{
      border-bottom: 1px solid #000;
    }
    /deep/ .el-table th.is-leaf{
      border-bottom: 1px solid #000;
    }
  }
}
.edit{
  /deep/ .el-dialog{
    .el-form-item:nth-of-type(1),.el-form-item:nth-of-type(2){
      width: 22%;
      display: inline-block;
    }
    .el-form-item:nth-of-type(2){
      margin-right: 40%;
    }
    .el-form-item:nth-of-type(3),.el-form-item:nth-of-type(4){
      width: 22%;
      display: inline-block;
    }
    .el-form-item:nth-of-type(6),.el-form-item:nth-of-type(7){
      width: 22%;
    }
    .el-textarea__inner{
      width: 510px;
      height: 120px;
    }
    .add{
      color: #00f;
      text-decoration: underline;
      position: absolute;
      bottom: 36%;
      left: 28%;
    }
    .el-table{
      border: 1px solid #000;
      color: #000;
      margin-left: 30px;
      /deep/ .el-button{
        border: none;
        color: #000;
        padding: 0;
      }
    }
    /deep/ .el-table .cell{
      text-align: center;
    }
    /deep/ .el-table--border td{
      border-right: 1px solid #000;
    }
    /deep/ .el-table--border th{
      border-right: 1px solid #000;
    }
    /deep/ .el-table td{
      border-bottom: 1px solid #000;
    }
    /deep/ .el-table th.is-leaf{
      border-bottom: 1px solid #000;
    }
  }
}
</style>
